{% extends "header.html" %}
{% load  cmdb_tag %}
{% block conten %}

{% if power < 100 %}
<div style="margin-bottom: 15px;margin-top: -45px;">
<button class="btn btn-block btn-default btn-flat" style="width:80px;float:right;">
<a href="/vmware/manage/virtual_type/" style="margin-bottom: 15px;margin-top: -45px;z-index: 999999;position: relative;">机型设置</a></button>

<button class="btn btn-block btn-default btn-flat" style="width:80px;float:right;margin-right: 10px;
    margin-top: 0px;color: #3c8dbc;" data-toggle="modal" data-target="#myModal">
资源节点</button>

<button class="btn btn-block btn-default btn-flat" style="width:80px;float:right;margin-right: 10px;
    margin-top: 0px;">
<a href="/operation/vpn/syschecklog/" style="margin-bottom: 15px;margin-top: -45px;z-index: 999999;position: relative;">审核日志</a></button>


<div style="clear:both"></div>
</div>
{% endif %}


<style>
#task table td {line-height:50px;}
</style>

<!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">

<div class="row">
	<div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">待处理工单</h3>
         <span class="label label-success pull-right">Wait</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;color:red;">{{wait}}</span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>单</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->

   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">正在处理中</h3>
         <span class="label label-success pull-right">Running</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;">{{running}}</span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>单/月</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->


   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">已处理工单</h3>
         <span class="label label-success pull-right">Over</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;"><a href="/vmware/manage/works/over/">{{over}}</a></span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>单</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
   <div class="col-md-3">
     <div class="box box-success">
       <div class="box-header with-border">
         <h3 class="box-title">总工单数</h3>
         <span class="label label-success pull-right">Total</span>
       </div><!-- /.box-header -->
       <div class="box-body" style="height: 100px;">
       	<div>
         	<span style="font-size:30px;color:#428bca;margin-left: 10px;"><a href="">{{total}}</a></span>
         </div>
         <div style="margin-top: 10px;float: right;margin-right: 10px;"><span>单</span></div>
       </div><!-- /.box-body -->
     </div><!-- /.box -->
   </div><!-- /.col -->
   
</div>



<div class="box" style="border-top: 0px;">
  <div class="box-header">
    <h3 class="box-title">工单任务</h3>
  </div>
  <!-- /.box-header -->
  <div class="box-body" id="task">
    <table id="example1" class="table table-bordered table-striped">
      <thead>
      <tr>
        <th>编号</th>
        <th>项目名</th>
        <th>用户</th>
        <th>内容</th>
        <th>对象</th>
        <th>状态</th>
        <th>回复次数</th>
        <th>提交时间</th>
        <th>响应者 </th>
        <th>操作 </th>
      </tr>
      </thead>
      <tbody>
      {% for x in process_works %}
      <tr>
      	<td>{{x.id}}</td>
      	<td>{% from_order_id_get_order x.order_id%}</td>
      	<td>{% user_info x.user %}</td>
      	<td>{{x.content}}</td>

      	<td>虚拟机</td>

      	{% if x.status == 0 %}
      	<td><label style="color:red;">末回复</label></td>
      	{% elif x.status == 1 %}
      	<td>已回复</td>
      	{% elif x.status == 3%}
      	<td>处理中</td>
      	{% endif %}
      	
      	<td>{% get_work_order_exchange_num x.id %} 次</td>
      	
      	<td>{% date_con x.create_time%}</td>
      	
      	<td>{% get_work_order_check_user x.id %}</td>
      	
      	<td>
      	{% if x.check_user == 0 %}
      	<a class="btn btn-success" href="/vmware/works/claim/{{x.id}}/">认领 </a>
      	{% elif x.check_user == uid %}
		<a class="btn btn-success" href="/vmware/order/follow/{{x.id}}/1/">回复</a>
		{% endif %}
		<a class="btn btn-success" href="/vmware/task/detial/45/">
			<i class="halflings-icon white fa fa-fw  fa-bars"></i>  
		</a>
		</td>
		{% endfor %}
      
      </tbody>
    </table>
  </div>
  <!-- /.box-body -->
</div>



<!-- DataTables -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- page script -->



<!-- Select2 -->
<script src="/static/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/static/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="/static/js/moment.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="/static/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/static/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/static/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- Page script -->

<script>
  $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();

    //Datemask dd/mm/yyyy
    $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
    //Datemask2 mm/dd/yyyy
    $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
    //Money Euro
    $("[data-mask]").inputmask();

    //Date range picker
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function (start, end) {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );

    //iCheck for checkbox and radio inputs
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    //Red color scheme for iCheck
    $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
      checkboxClass: 'icheckbox_minimal-red',
      radioClass: 'iradio_minimal-red'
    });
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    });

    //Colorpicker
    $(".my-colorpicker1").colorpicker();
    //color picker with addon
    $(".my-colorpicker2").colorpicker();

    //Timepicker
    $(".timepicker").timepicker({
      showInputs: false
    });
  });
</script>







<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>


{% endblock %}